<div>
    <div class="head">
        <h2 id="health-page-heading" class="d-inline-block">Health Checks</h2>
        <jhi-route-selector class="float-right refresh-left-side"></jhi-route-selector>
    </div>

    <div class="table-responsive">
        <table id="healthCheck" class="table table-striped" aria-describedby="health-page-heading">
            <thead>
                <tr>
                    <th scope="col">Service Name</th>
                    <th scope="col" class="text-center">Status</th>
                    <th scope="col" class="text-center">Details</th>
                </tr>
            </thead>
            <tbody *ngIf="health">
                <tr *ngFor="let componentHealth of health.components | keys">
                    <td>
                        <span class="text-capitalize">{{ componentHealth.key }}</span>
                    </td>
                    <td class="text-center">
                        <span class="badge" [ngClass]="getBadgeClass(componentHealth.value.status)">
                            {{ componentHealth.value.status }}
                        </span>
                    </td>
                    <td class="text-center">
                        <a class="hand" (click)="showHealth(componentHealth)" *ngIf="componentHealth.value.details">
                            <fa-icon icon="eye"></fa-icon>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
